<template>
	<div style="background: #eee;padding: 20px;">
		<Card :bordered="false" style="height: 100%">
			<Row>
				<Col span="12">
					<Alert show-icon>
						温馨提示
						<Icon type="ios-lightbulb-outline" slot="icon"></Icon>
						<span slot="desc">选择完请假起始日期后，记得选择时长，单位为小时<br/>一天 = 8小时，半天 = 4小时</span>
					</Alert>
				</Col>
			</Row>
			<Form ref="formItem" :model="formItem" :rules="ruleItem" :lable-width="80">
				<FormItem label="请假日期" prop="date">
					<Row>
						<Col>
							<DatePicker v-model="formItem.date" type="daterange" :editable="false" show-week-numbers placeholder="选择请假日期" style="width: 200px" format="yyyy-MM-dd" @on-change="formItem.date=$event"></DatePicker>
						</Col>
					</Row>
				</FormItem>
				<FormItem label="请假时长" prop="time">
					<Row>
						<Col span="12">
							<Slider v-model="formItem.time" :min="1" :max="200" :step="1" show-input></Slider>
						</Col>
					</Row>
				</FormItem>
				<FormItem label="请假类型" prop="type">
					<Row>
						<Col>
							<Select v-model="formItem.type" filterable style="width: 200px" title="">
								<Option v-for="item in type" :value="item.value" :key="item.value">{{item.label}}</Option>
							</Select>
						</Col>
					</Row>
				</FormItem>
				<FormItem label="申请用户" prop="user">
					<Row>
						<Col>
							<Select v-model="formItem.user" style="width: 200px" @on-change="selectUser" filterable title="">
								<Option v-for="item in user" :value="item.value" :key="item.value">{{item.label}}</Option>
							</Select>
							<span>加班时长：{{overtime}}</span>
							<span>年假时长：{{annual}}</span>
						</Col>
					</Row>
				</FormItem>
				<FormItem label="用户工号" prop="number">
					<Row>
						<Col>
							<Input v-model="formItem.number" type="text" placeholder="请输入用户工号" style="width: 200px" disabled/>
						</Col>
					</Row>
				</FormItem>
				<FormItem label="请假理由" prop="reason">
					<Row>
						<Col>
							<Input v-model="formItem.reason" type="textarea" :autosize="{minRows:2,maxRows:5}" placeholder="请输入请假事由" style="width: 200px"/>
						</Col>
					</Row>
				</FormItem>
				<FormItem>
					<Button type="primary" @click="handleSubmit('formItem')">提交</Button>
					<Button @click="handleReset('formItem')">重置</Button>
				</FormItem>
			</Form>
		</Card>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				name: 'index',
				formItem: {
					date: '',
					time: 1,
					type: '',
					user: '',
					reason: '',
					number: ''
				},
				ruleItem: {
					date: [
						{
							required: true, message: "请选择请假起始日期", trigger: 'change', type: 'array', len: 2, fields: {
								0: {type: 'string', required: true, pattern: /\d{4}-\d{2}-\d{2}/, message: '请选择请假起始日期'},
								1: {type: 'string', required: true, pattern: /\d{4}-\d{2}-\d{2}/, message: '请选择请假起始日期'}
							}
						}
					],
					time: [
						{required: true, message: "请选择请假时长", trigger: 'change', type: 'number'}
					],
					type: [
						{required: true, message: "请选择请假类型", trigger: 'blur'}
					],
					user: [
						{required: true, message: "请选择申请用户", trigger: 'blur'}
					],
					reason: [
						{required: true, message: "请填写请假事由", trigger: 'blur'}
					],
					number: [
						{required: true, message: "请填写用户工号", trigger: 'blur'}
					]
				},
				type: [
					{value: '事假', label: '事假'},
					{value: '病假', label: '病假'},
					{value: '婚假', label: '婚假'},
					{value: '产假', label: '产假'},
					{value: '丧假', label: '丧假'},
					{value: '年假', label: '年假'},
					{value: '陪产假', label: '陪产假'},
					{value: '调休假', label: '调休假'}
				],
				user: [],
				data: [],
				overtime: '0',
				annual: '0'
			}
		},
		methods: {
			getUserInfo() {
				this.$ajax({
					method: 'get',
					url: '/getAttendanceInfo/getUserInfo',
				})
					.then(response => {
						this.data = response.data.data;
						this.user = response.data.data.map(function (k) {
							return {
								value: k.username,
								label: k.username
							}
						});
					})
					.catch(error => {
						console.log(error);
					});
			},
			selectUser(value) {
				this.$ajax({
					method: 'post',
					url: '/getAttendanceInfo/getUserInfo',
					data: {username: value}
				})
					.then(response => {
						this.overtime = response.data.data[0].overtime;
						this.annual = response.data.data[0].annual;
						this.formItem.number = response.data.data[0].usernumber;
					})
					.catch(error => {
						console.log(error);
					});
			},
			handleSubmit(name) {
				this.$refs[name].validate((valid) => {
					if (valid) {
						this.$ajax({
							method: 'post',
							url: '/getAttendanceInfo/handleLeave',
							data: this.formItem
						})
							.then(response => {
								if (response.data.code === 0) {
									this.$Notice.success({
										title: '提交成功，待审核'
									});
									this.overtime = '0';
									this.annual = '0';
									this.$refs[name].resetFields();
								}
							})
							.catch(error => {
								console.log(error);
								this.$Notice.error({
									title: '提交失败，请重试'
								});
							});
					} else {
						this.$Notice.error({
							title: '提交失败，请重试'
						});
					}
				});
			},
			handleReset(name) {
				this.$refs[name].resetFields();
			}
		},
		created() {
			this.getUserInfo();
		}
	}
</script>
